<template>
    <div class='flex'>
        <section :class='$style.aside'>
            <div class='flex-align-items-center'>
                <div class='bold'>选择行业：</div>
                <div class='flex-1'>
                    <a-cascader class='w-100' placeholder='请选择行业' @change='selectIndustry' :options='industryOptions' :load-data='loadIndustry'></a-cascader>
                </div>
            </div>
            <div class='flex m-t-20'>
                <div class='bold'>选择指标：</div>
                <div class='flex-1'>
                    <a-tree @select='selectFactor' :fieldNames='{children : "children", title : "label", key : "key"}' :tree-data='factorRows'></a-tree>
                </div>
            </div>
        </section>
        <section class='flex-1 m-l-20'>
            <div :class='$style.chart'>
                <template v-if='loading'>
                    <a-skeleton active />
                </template>
                <template v-else>
                    <template v-if='chartData'>
                        <v-chart :option='option' />
                    </template>
                    <template v-else>
                        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE">
                            <template #description>
                                <template v-if='!industryCode || !selectedFactorId'>请从左侧选择行业和指标</template>
                                <template v-else>无数据</template>
                            </template>
                        </a-empty>
                    </template>
                </template>
            </div>
        </section>
    </div>
</template>

<script lang='ts' setup>
    import { use } from "echarts/core";
    import { LineChart } from "echarts/charts";
    import { Empty } from 'ant-design-vue';
    import {
    TitleComponent,
    LegendComponent,
    TooltipComponent,
    DataZoomComponent
    } from "echarts/components";


    use([
    TitleComponent,
    LineChart,
    LegendComponent,
    TooltipComponent,
    DataZoomComponent
    ]);

    import { computed, nextTick, reactive, ref } from "vue";
    import { industryApi, industryFactorApi, industryFactorDetailApi } from '@/api/industry'
import { message } from "ant-design-vue";

    const loading = ref(false)
    const industryOptions = reactive<any[]>([])
    const factorRows = reactive([])
    const chartData = ref(null)

    let industryCode = ref(null)
    let selectedFactorId = ref(0)

    async function loadIndustry(selectedOptions) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        const rows = await industryApi(targetOption.id)
        targetOption.loading = false
        targetOption.children = rows
    }

    async function industryFactorDetail() {
        loading.value = true
        const res = await industryFactorDetailApi({factor_id : selectedFactorId.value, code : industryCode.value})
        loading.value = false
        if(res.success) {
            chartData.value = res.data
        }else {
            chartData.value = null
            message.error(res.message)
        }
    }

    function selectIndustry(e) {
        if(e && e.length > 0) {
            industryCode.value = e[e.length - 1]
            if(selectedFactorId.value) {
                nextTick(() => {
                    industryFactorDetail()
                })
            }
            
        }else {
            industryCode.value = null
        }
        
    }

    function selectFactor(values, {node}) {
        selectedFactorId.value = node.dataRef.id
        if(industryCode.value == null) {
            message.error('请选择行业')
        }else {
            industryFactorDetail()
        }
    }

    const option = computed(() => {
        let option = {
            ...chartData.value,
            grid : {
                top : '50px',
                right : '30px',
                bottom : '30px',
                //left : '30px'
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
        }

        return option
    })

    industryApi().then(rows => {
        industryOptions.push(...rows)
    })

    industryFactorApi().then(rows => {
        factorRows.push(...rows)
    })
</script>


<style scoped module lang='scss'>
    .aside{
        background: #fff;
        width: 300px;
    }

    .chart{
        height: 500px;
    }
</style>